<template>
  <div>
    <div style="height:50px;font-size:20px;margin-left:20px" class="goCenterUp">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/home/firstPage' }">后台管理</el-breadcrumb-item>
        <el-breadcrumb-item>管理</el-breadcrumb-item>
        <el-breadcrumb-item>培训管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-container v-if="step==1" style="margin-left:20px">
      <el-header style="margin-top:40px;margin-left:20px">
        <el-container style="width:100%">
          <el-row type="flex" justify="space-around" :gutter="20" style="width:100%">
            <el-col :span="4">
              <el-select
                v-model="currentState"
                placeholder="请选择状态"
                style="width:100%"
                @change="changeState"
              >
                <el-option v-for="item in states" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="currentProfessionId"
                placeholder="请选择工种"
                style="width:100%"
                @change="changeProfession"
              >
                <el-option
                  v-for="item in professions"
                  :key="item.professionId"
                  :label="item.professionName"
                  :value="item.professionId"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-input placeholder="请输入内容" v-model="keyWord">
                <el-button slot="append" icon="el-icon-search" @click="searchInfo"></el-button>
              </el-input>
            </el-col>
          </el-row>
        </el-container>
      </el-header>
      <el-main>
        <el-table :data="tableData" stripe style="width: 100%">
          <!-- <el-table-column type="selection" width="100"></el-table-column> -->
          <el-table-column prop="picture" label="图片">
            <template slot-scope="scope">
              <el-image style="width: 100px; height: 100px" :src="scope.row.pic" fit="cover"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="trainClassName" label="培训课次名称"></el-table-column>
          <el-table-column prop="publisherName" label="发布方"></el-table-column>
          <el-table-column prop="passTime" label="审核时间">
            <template slot-scope="scope">
              <div v-if="scope.row.state==='待审核'">
                <!-- <i class="el-icon-s-check" style="color:#fd034f"></i> -->
                <span style="color:#fd034f;margin-left: 10px">待审核</span>
              </div>
              <div v-else-if="scope.row.state==='已发布'">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{scope.row.passTime }}</span>
              </div>
              <div v-else-if="scope.row.state==='已下架'">
                <span style="color:#D0D0D0;margin-left: 10px">已下架</span>
              </div>
              <!--未通过-->
              <div v-else>
                <span style="color:#E6A23C;margin-left: 10px">未通过</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="clickCount" label="点击量"></el-table-column>
          <el-table-column fixed="right" prop="action" label="操作">
            <template slot-scope="scope">
              <el-row v-if="scope.row.state==='待审核'">
                <el-col :span="8">
                  <el-button type="primary" plain @click="publishStep1(scope.row)">发布</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="danger" plain @click=" againstStep1(scope.row)">驳回</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="warning" plain @click="goToStep2(scope.row)">查看</el-button>
                </el-col>
              </el-row>
              <el-row v-else-if="scope.row.state==='已发布'">
                <el-col :span="8">
                  <el-button type="success" plain @click="goToStep2(scope.row)">跟进</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="danger" plain disabled>驳回</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="warning" plain @click="goToStep2(scope.row)">查看</el-button>
                </el-col>
              </el-row>
              <el-row v-else-if="scope.row.state==='未通过'">
                <el-col :span="8">
                  <el-button type="primary" plain disabled>发布</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="danger" plain disabled>驳回</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="warning" plain @click="goToStep2(scope.row)">查看</el-button>
                </el-col>
              </el-row>
              <!--已下架-->
              <el-row v-else>
                <el-col :span="8">
                  <el-button type="primary" plain disabled>发布</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="danger" plain disabled>驳回</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="warning" plain @click="goToStep2(scope.row)">查看</el-button>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer style="margin-top:10px">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :page-size="pageInfo.pageSize"
          :total="pageInfo.total"
          @current-change="changePages"
        ></el-pagination>
      </el-footer>
    </el-container>
    <div v-else-if="step==2" style="margin-left:20px;margin-top:50px">
      <div>
        <div class="goRight" style="margin-right:40px">
          <el-button type="primary" size="small" @click="goToStep1">返回</el-button>
        </div>
        <el-row>
          <el-col>
            <span>概要：</span>
          </el-col>
        </el-row>
        <el-container style="margin-top:20px;">
          <el-aside width="500px">
            <el-image style="width:100%;height: 300px" :src="baseInfo.picture" fit="cover"></el-image>
          </el-aside>
          <el-main style="margin-left:20px">
            <el-container>
              <el-aside style="width:50%">
                <el-row style="margin-top:20px">
                  <span>培训课次名称：{{baseInfo.trainClassName}}</span>
                </el-row>
                <el-row style="margin-top:20px">
                  <span>
                    状态：
                    <span style="color:#fd034f">{{baseInfo.state}}</span>
                  </span>
                </el-row>
                <el-row style="margin-top:20px">
                  <span>发布方名称：{{baseInfo.publisherName}}</span>
                </el-row>
                <el-row style="margin-top:20px">
                  <span>发布时间：{{baseInfo.publishTime}}</span>
                </el-row>
                <el-row style="margin-top:20px">
                  <span>审核通过时间：{{baseInfo.passTime}}</span>
                </el-row>
              </el-aside>
              <el-main>
                <el-row style="margin-top:20px">
                  <span>联系方式：{{baseInfo.contact}}</span>
                </el-row>
                <el-row style="margin-top:20px">
                  <span>培训人数：{{wholeInfo.requirePopulation}}人</span>
                </el-row>
                <el-row style="margin-top:20px">
                  <span>培训日期：{{wholeInfo.startTime}} - {{wholeInfo.endTime}}</span>
                </el-row>
                <el-row style="margin-top:20px">
                  <span>培训具体时间：{{wholeInfo.startClock}} - {{wholeInfo.endClock}}</span>
                </el-row>
                <el-row style="margin-top:20px">
                  <span>
                    <span>
                      培训费用：
                      <span style="color:#fd034f">{{wholeInfo.fee}}¥</span>
                    </span>
                  </span>
                </el-row>
              </el-main>
            </el-container>
          </el-main>
        </el-container>
      </div>
      <div style="margin-top:20px;">
        <el-row>
          <span>培训课次介绍：</span>
        </el-row>
        <el-row class="peiXunIntroBox">
          <span>{{baseInfo.introduction}}</span>
        </el-row>
      </div>
      <div style="margin-top:20px;">
        <el-row>
          <span>指标：</span>
        </el-row>
        <div>
          <el-table style="margin-top:10px" :data="zhiBiaoData" stripe border>
            <el-table-column prop="clickCount" label="点击量">
              <template slot-scope="scope">
                <i class="iconfont icondianji" style="color:#E6A23C;font-size:20px"></i>
                <span style="margin-left: 10px">{{ scope.row.clickCount }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="enrollCount" label="报名量">
              <template slot-scope="scope">
                <i class="iconfont iconbaoming" style="color:#E6A23C;font-size:20px"></i>
                <span style="margin-left: 10px">{{ scope.row.enrollCount }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="shareCount" label="分享量">
              <template slot-scope="scope">
                <i class="iconfont iconfenxiang" style="color:#E6A23C;font-size:20px"></i>
                <span style="margin-left: 10px">{{ scope.row.shareCount }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //1：培训管理，2：查看培训课次
      step: 1,

      //step:1
      pageInfo: {
        pageNo: 1,
        pageSize: 4,
        total: 0
      },
      currentProfessionId: 1,
      professions: [
        // {
        //   professionId: '',
        //   professionName: "全部"
        // }
      ],
      currentState: "全部",
      states: ["全部", "已发布", "待审核", "未通过", "已下架"],
      keyWord: "",
      tableData: [
        // {
        //   publishTime: 1566882000000,
        //   publisherName: "massami的测试机构1",
        //   credentialId: 1,
        //   id: 1045,
        //   state: "已发布",
        //   picture:
        //     "http://xinzhitong.oss-cn-shanghai.aliyuncs.com/static/train/1/1.jpg",
        //   clickCount: 0,
        //   trainId: "90788",
        //   trainClassName: "初级电工训练"
        // },
        // {
        //   publishTime: 1566882000000,
        //   publisherName: "massami的测试机构1",
        //   credentialId: 1,
        //   id: 1045,
        //   state: "待审核",
        //   picture:
        //     "http://xinzhitong.oss-cn-shanghai.aliyuncs.com/static/train/1/1.jpg",
        //   clickCount: 0,
        //   trainId: "90788",
        //   trainClassName: "初级电工训练"
        // },
        // {
        //   publishTime: 1566882000000,
        //   publisherName: "massami的测试机构1",
        //   credentialId: 1,
        //   id: 1045,
        //   state: "未通过",
        //   picture:
        //     "http://xinzhitong.oss-cn-shanghai.aliyuncs.com/static/train/1/1.jpg",
        //   clickCount: 0,
        //   trainId: "90788",
        //   trainClassName: "初级电工训练"
        // },
        // {
        //   publishTime: 1566882000000,
        //   publisherName: "massami的测试机构1",
        //   credentialId: 1,
        //   id: 1045,
        //   state: "已下架",
        //   picture:
        //     "http://xinzhitong.oss-cn-shanghai.aliyuncs.com/static/train/1/1.jpg",
        //   clickCount: 0,
        //   trainId: "90788",
        //   trainClassName: "初级电工训练"
        // }
      ],

      //step2
      //基本信息
      baseInfo: {
        clickCount: 0,
        credentialId: 0,
        id: 0,
        introduction: '',
        passTime: '',
        picture:'',
        publisherName: '',
        state: '',
        trainClassName: '',
        trainId: 0
      },
      //重要指标
      zhiBiaoData: [
        {
          clickCount: 20,
          enrollCount: 29,
          shareCount: 55
        }
      ],
      //完整信息（机构端传）
      wholeInfo: {
        trainId: 0,
        startClock: "",
        requirePopulation: 0,
        trainClassNo: 0,
        contact: "",
        fee: 0,
        endClock: "",
        startTime: "",
        endTime: "",
        professionId: 0
      }
    };
  },
  methods: {
    goToStep1() {
      this.step = 1;
    },
   async goToStep2(row) {
      console.log('进入查看：',row);
      await this.getBaseInfo(row.id);
      await this.getImportantIndex(row.id);
      await this.getTrainAllInfo(row.id);
      console.log("step1：", this.step);
      this.step = 2;
      console.log("step2:", this.step);
    },
    //查看培训课次基本信息
    getBaseInfo(id) {
      var URL = this.IP + "/trainManager/theTrain";
      console.log(URL);
      console.log(id);
      this.$ajax({
        method: "get",
        url: URL,
        params: {
          trainClassTimeId: id
        }
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.baseInfo = response.data.data;
            console.log("基本信息：", this.baseInfo);
          } else {
            this.$message({
              message: response.data.msg,
              type: "error"
            });
            this.baseInfo = {};
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取重要指标信息
    getImportantIndex(id) {
      var URL = this.IP + "/train/trainClassTimeIndex";
      console.log(URL);
      console.log(id);
      this.$ajax({
        method: "get",
        url: URL,
        params: {
          trainClassTimeId: id
        }
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.zhiBiaoData = [response.data.data];
            console.log("指标：", this.zhiBiaoData);
          } else {
            this.$message({
              message: response.data.msg,
              type: "error"
            });
            this.zhiBiaoData = [];
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取培训完整信息(机构端传)
    getTrainAllInfo(id) {
      var URL = this.IP + "/train/trainTotalInformation";
      console.log(URL);
      console.log(id);
      this.$ajax({
        method: "get",
        url: URL,
        params: {
          trainClassTimeId: id
        }
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.wholeInfo = response.data.data;
          } else {
            this.$message({
              message: response.data.msg,
              type: "error"
            });
            this.wholeInfo = {};
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取工种种类同时请求获取第一次的培训课次概览表
    getProfession() {
      var URL = this.IP + "/visitor/getProfessionInformation";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.professions = response.data.data.professionInformation;
            // var item;
            // for( item in response.data.data.professionInformation){
            //   this.professions.push(item);
            // }
            console.log(this.professions);
            this.currentProfessionId = this.professions[0].professionId;

            var params = {
              keyWord: this.keyWord,
              credentialId: this.currentProfessionId,
              pageNo: this.pageInfo.pageNo,
              pageSize: this.pageInfo.pageSize
            };
            this.getGaiLanInfo(params);
          } else {
            this.professions = [];
            console.log(response.data.msg);
            this.$message.error(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //获取培训课次概览表格
    getGaiLanInfo(params) {
      var URL = this.IP + "/trainManager/trains";
      console.log(URL);
      console.log(params);
      this.$ajax({
        method: "get",
        url: URL,
        params: params
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.tableData = response.data.data.info;
            this.pageInfo.total = response.data.data.total;
          } else {
            this.tableData = [];
            this.pageInfo.pageNo = 1;
            this.pageInfo.total = 0;
            console.log(response.data.msg);
            this.$message.error(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //搜索培训课次信息
    searchInfo() {
      this.pageInfo.pageNo = 1;
      var params = {
        keyWord: this.keyWord,
        credentialId: this.currentProfessionId,
        pageNo: this.pageInfo.pageNo,
        pageSize: this.pageInfo.pageSize
      };
      this.getGaiLanInfo(params);
    },
    changeState() {},
    //改变工种时变化培训课次信息
    changeProfession(id) {
      this.currentProfessionId = id;
      this.pageInfo.pageNo = 1;
      var params = {
        keyWord: this.keyWord,
        credentialId: this.currentProfessionId,
        pageNo: this.pageInfo.pageNo,
        pageSize: this.pageInfo.pageSize
      };
      this.getGaiLanInfo(params);
    },
    //发布培训课次
    publishStep1(row) {
      console.log(row);
      this.$prompt("可以选择是否输入给机构的提示信息", "提示", {
        confirmButtonText: "发布",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          console.log("提示信息：", value);
          var params = {
            trainClassTimeId: row.id,
            text: value
          };
          this.publishStep2(params);
        })
        .catch(() => {
          console.log("取消发布");
        });
    },
    publishStep2(params) {
      var URL = this.IP + "/trainManager/publishTheTrainClassTime";
      console.log(URL);
      console.log(params);
      this.$ajax({
        method: "post",
        url: URL,
        params: params
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.$message({
              message: response.data.data,
              type: "success"
            });
            var params = {
              keyWord: this.keyWord,
              credentialId: this.currentProfessionId,
              pageNo: this.pageInfo.pageNo,
              pageSize: this.pageInfo.pageSize
            };
            this.getGaiLanInfo(params);
          } else {
            console.log(response.data.msg);
            this.$message.error(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    againstStep1(row) {
      this.$prompt("可以选择是否输入给机构的提示信息", "提示", {
        confirmButtonText: "驳回",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          console.log("提示信息：", value);
          var params = {
            trainClassTimeId: row.id,
            text: value
          };
          this.againstStep2(params);
        })
        .catch(() => {
          console.log("取消驳回");
        });
    },
    againstStep2(params) {
      var URL = this.IP + "/trainManager/rejectTheTrainClassTime";
      console.log(URL);
      console.log(params);
      this.$ajax({
        method: "post",
        url: URL,
        params: params
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.$message({
              message: response.data.data,
              type: "success"
            });
            var params = {
              keyWord: this.keyWord,
              credentialId: this.currentProfessionId,
              pageNo: this.pageInfo.pageNo,
              pageSize: this.pageInfo.pageSize
            };
            this.getGaiLanInfo(params);
          } else {
            console.log(response.data.msg);
            this.$message.error(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //翻页的时候更新表格
    changePages(pageNo) {
      console.log(pageNo);
      this.pageInfo.pageNo = pageNo;
      var params = {
        keyWord: this.keyWord,
        credentialId: this.currentProfessionId,
        pageNo: this.pageInfo.pageNo,
        pageSize: this.pageInfo.pageSize
      };
      this.getGaiLanInfo(params);
    }
  },
  mounted() {
    this.getProfession();
  }
};
</script>
<style>
.goCenterUp {
  display: flex;
  align-items: center;
}
.pointer {
  cursor: pointer;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.peiXunIntroBox {
  /* margin: 20px; */
  padding: 20px;
  width: 500px;
  letter-spacing: 5px;
}
.goRight {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>